<template>
    <a-layout style="min-height: 100vh">
        <a-layout-sider v-model:collapsed="collapsed" collapsible>
            <div class="logo">
                <span>ScheDule</span>
            </div>
            <a-menu v-for="menu in menu_list" v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                <a-menu-item v-if="menu.children.length===0" :key="menu.id">
                    <router-link :to="menu.menu_url">
                        <desktop-outlined/>
                        <span> {{ menu.title }}</span>
                    </router-link>
                </a-menu-item>
                <a-sub-menu v-else :key="menu.id">
                    <template #title>
            <span>
              <laptop-outlined/>
              <span>{{ menu.title }}</span>
            </span>
                    </template>
                    <a-menu-item v-for="child_menu in menu.children" :key="child_menu.id">
                        <router-link :to="child_menu.menu_url">{{ child_menu.title }}</router-link>
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff;text-align: center">
                <a-row>
                    <a-col :span="2" :offset="22">
                        <a-dropdown placement="bottom">
                            <p class="user">
                                <UserOutlined/>
                                root
                            </p>
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                        <LockOutlined/>
                                        <router-link to="/personal">修改密码</router-link>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <LogoutOutlined/>
                                        <router-link to="/login" @click="logout">退出登陆</router-link>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </a-col>
                </a-row>
            </a-layout-header>
            <a-layout-content style="margin: 0 16px">
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item><a href="">首页</a></a-breadcrumb-item>
                    <a-breadcrumb-item>信息面板</a-breadcrumb-item>
                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', minHeight: '550px'}">
                    <router-view></router-view>
                </div>
            </a-layout-content>
            <a-layout-footer style="text-align: center">
                <p>Copyright © 2023 Yuan</p>
                Power By <a href="">Yuan &amp; Xiang</a>
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>
<script setup>
import {ref} from 'vue';
import {LogoutOutlined, LockOutlined, DesktopOutlined, UserOutlined, LaptopOutlined} from '@ant-design/icons-vue';
import router from "../router/index.js";


const collapsed = ref(false);
const selectedKeys = ref(['1']);

const logout = () => {
    sessionStorage.clear()
    localStorage.clear()
    router.push('/login')
}

const menu_list = ref([
    {
        id: 1, icon: 'mail', title: '信息面板', menu_url: '/', children: []
    },
    {
        id: 2, icon: 'mail', title: '资产管理', menu_url: '/bingo', children: [
            {id: 9, icon: 'mail', title: '主机管理', menu_url: '/host'},
            // {id: 10, icon: 'mail', title: 'DB管理', menu_url: '/db'},
            // {id: 11, icon: 'mail', title: 'IDC机房', menu_url: '/idc'},
            // {id: 12, icon: 'mail', title: '资产配置', menu_url: '/config'},
        ]
    },
    {
        "id": 3, icon: 'bold', title: '任务管理', menu_url: '/work', children: [
            {id: 13, icon: 'mail', title: '批量任务', menu_url: '/work/multi_exec'},
            {id: 15, icon: 'mail', title: '任务模板', menu_url: '/template_manage'},
            // {id: 14, icon: 'mail', title: '计划任务', menu_url: '/work/cron', children: []},
        ]
    },
    // {
    //     id: 4, icon: 'highlight', title: '代码管理', menu_url: '/code', children: [
    //         {id: 16, icon: 'mail', title: '应用管理', menu_url: '/code/app'},
    //         {id: 17, icon: 'mail', title: '发布申请', menu_url: '/code/release'},
    //         {id: 18, icon: 'mail', title: '代码仓库', menu_url: '/code/repo'},
    //         {id: 19, icon: 'mail', title: '镜像仓库', menu_url: '/code/image'},
    //     ]
    // },
    // {
    //     id: 5, icon: 'mail', title: '配置管理', menu_url: '/config', children: [
    //         {id: 20, title: '环境管理', menu_url: '/config/env'},
    //         {id: 21, title: '服务配置', menu_url: '/config/services'},
    //         {id: 22, title: '应用配置', menu_url: '/config/app'}
    //     ]
    // },
    // {
    //     id: 6, icon: 'mail', title: '监控预警', menu_url: '/monitor', children: [
    //         {id: 23, title: '报警历史', menu_url: '/monitor/history'},
    //         {id: 24, title: '报警联系人', menu_url: '/monitor/user'},
    //         {id: 25, title: '报警联系组', menu_url: '/monitor/group'}
    //     ]
    // },
    {
        id: 7, icon: 'mail', title: '用户管理', menu_url: '/auth', children: [
            {id: 26, title: '账户管理', menu_url: '/auth/user'},
            {id: 27, title: '角色管理', menu_url: '/auth/role'},
            {id: 28, title: '权限管理', menu_url: '/auth/permission'},
            {id: 29, title: '菜单管理', menu_url: '/auth/menu'},
        ]
    },
    {
        id: 8, icon: 'mail', title: '系统设置', menu_url: '/sys', children: []
    },
])

</script>

<style>
.logo {
    font-style: italic;
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin: 0 0 10px;
    line-height: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.1);
}

.user {
    position: relative;
}

.user:after {
    content: "";
    border: 4px solid transparent;
    border-top: 4px solid #000;
    position: absolute;
    width: 0;
    height: 0;
    top: 30px;
    right: 12px;
    margin: auto;
}

</style>